<template>
  <div class="app-container thesis-home">
    <el-row :gutter="20">
      <!-- 个人信息板块 -->
      <el-col :xs="24" :sm="24" :md="8" :lg="8">
        <el-card class="personal-info">
          <div slot="header" class="clearfix">
            <span>个人信息</span>
          </div>
          <div class="body">
            <el-descriptions :column="1" border>
              <el-descriptions-item label="姓名">{{ studentInfo.name }}</el-descriptions-item>
              <el-descriptions-item label="学号">{{ studentInfo.studentId }}</el-descriptions-item>
              <el-descriptions-item label="专业">{{ studentInfo.major }}</el-descriptions-item>
              <el-descriptions-item label="班级">{{ studentInfo.className }}</el-descriptions-item>
              <el-descriptions-item label="指导教师">{{ studentInfo.supervisor }}</el-descriptions-item>
            </el-descriptions>
          </div>
        </el-card>
      </el-col>
      
      <!-- 毕业论文基本信息展示区 -->
      <el-col :xs="24" :sm="24" :md="16" :lg="16">
        <el-card class="thesis-info">
          <div slot="header" class="clearfix">
            <span>毕业论文基本信息</span>
          </div>
          <div class="body">
            <el-descriptions :column="2" border>
              <el-descriptions-item label="论文题目">{{ thesisInfo.title }}</el-descriptions-item>
              <el-descriptions-item label="论文类型">{{ thesisInfo.type }}</el-descriptions-item>
              <el-descriptions-item label="研究领域">{{ thesisInfo.field }}</el-descriptions-item>
              <el-descriptions-item label="提交日期">{{ thesisInfo.submitDate }}</el-descriptions-item>
              <el-descriptions-item label="关键词">{{ thesisInfo.keywords }}</el-descriptions-item>
              <el-descriptions-item label="状态">
                <el-tag :type="getStatusType(thesisInfo.status)">{{ thesisInfo.status }}</el-tag>
              </el-descriptions-item>
            </el-descriptions>
            <div class="thesis-abstract">
              <h4>摘要</h4>
              <p>{{ thesisInfo.abstract }}</p>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    
    <el-row :gutter="20" style="margin-top: 20px;">
      <!-- 毕业论文成果详细介绍模块 -->
      <el-col :span="24">
        <el-card class="thesis-results">
          <div slot="header" class="clearfix">
            <span>毕业论文成果展示</span>
          </div>
          <div class="body">
            <el-tabs v-model="activeTab" @tab-click="handleTabClick">
              <el-tab-pane label="研究成果" name="research">
                <div v-for="(item, index) in thesisResults.research" :key="index" class="result-item">
                  <el-card shadow="hover">
                    <div slot="header" class="result-header">
                      <span>{{ item.title }}</span>
                      <el-tag size="mini" :type="getResultType(item.type)">{{ item.type }}</el-tag>
                    </div>
                    <div class="result-content">
                      <p>{{ item.description }}</p>
                      <div class="result-meta">
                        <span>发布时间: {{ item.publishDate }}</span>
                        <el-button v-if="item.link" type="text" @click="openLink(item.link)">查看详情</el-button>
                      </div>
                    </div>
                  </el-card>
                </div>
              </el-tab-pane>
              
              <el-tab-pane label="论文章节" name="chapters">
                <el-timeline>
                  <el-timeline-item
                    v-for="(chapter, index) in thesisResults.chapters"
                    :key="index"
                    :timestamp="chapter.updateTime"
                    placement="top">
                    <el-card>
                      <h4>{{ chapter.title }}</h4>
                      <p>{{ chapter.summary }}</p>
                      <div class="chapter-actions">
                        <el-button size="mini" type="primary" @click="viewChapter(chapter.id)">查看章节</el-button>
                        <el-button size="mini" type="success" @click="downloadChapter(chapter.id)">下载</el-button>
                      </div>
                    </el-card>
                  </el-timeline-item>
                </el-timeline>
              </el-tab-pane>
              
              <el-tab-pane label="相关资源" name="resources">
                <el-row :gutter="16">
                  <el-col :span="8" v-for="(resource, index) in thesisResults.resources" :key="index">
                    <el-card :body-style="{ padding: '0px' }" class="resource-card">
                      <img :src="resource.image" class="resource-image">
                      <div style="padding: 14px;">
                        <span>{{ resource.title }}</span>
                        <div class="bottom">
                          <time class="time">{{ resource.uploadDate }}</time>
                          <el-button type="text" class="button" @click="downloadResource(resource.id)">下载</el-button>
                        </div>
                      </div>
                    </el-card>
                  </el-col>
                </el-row>
              </el-tab-pane>
            </el-tabs>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: 'ThesisHomeTemplate',
  data() {
    return {
      activeTab: 'research',
      studentInfo: {
        name: '学生姓名',
        studentId: '20210001',
        major: '计算机科学与技术',
        className: '计科1901',
        supervisor: '指导教师姓名'
      },
      thesisInfo: {
        title: '基于Vue的毕业论文管理系统设计与实现',
        type: '应用研究',
        field: '计算机软件与理论',
        submitDate: '2025-05-30',
        keywords: 'Vue, 毕业论文, 管理系统',
        status: '已完成',
        abstract: '本文设计并实现了一个基于Vue框架的毕业论文管理系统，该系统采用前后端分离架构，前端使用Vue.js和Element UI组件库，后端采用Spring Boot框架，实现了论文提交、审核、评分等功能。系统具有良好的用户体验和可扩展性，能够有效提高毕业论文管理工作的效率。'
      },
      thesisResults: {
        research: [
          {
            title: '基于Vue的响应式设计研究',
            type: '期刊论文',
            description: '本研究探讨了Vue框架在响应式设计中的应用，提出了几种优化方案，并通过实验验证了这些方案的有效性。',
            publishDate: '2024-10-15',
            link: '#'
          },
          {
            title: '前端组件化开发实践',
            type: '会议论文',
            description: '本文总结了在前端项目开发中组件化设计的实践经验，包括组件划分原则、通信方式、状态管理等关键问题。',
            publishDate: '2024-12-20',
            link: '#'
          }
        ],
        chapters: [
          {
            id: 1,
            title: '第一章 绪论',
            summary: '本章介绍了研究背景、意义、国内外研究现状以及本文的主要研究内容和结构安排。',
            updateTime: '2025-01-15'
          },
          {
            id: 2,
            title: '第二章 相关技术与理论基础',
            summary: '本章介绍了Vue.js框架、Spring Boot框架、前后端分离架构等相关技术，为后续系统设计奠定基础。',
            updateTime: '2025-02-20'
          },
          {
            id: 3,
            title: '第三章 系统需求分析与设计',
            summary: '本章对毕业论文管理系统进行了需求分析，包括功能需求和非功能需求，并设计了系统的整体架构和数据库。',
            updateTime: '2025-03-10'
          }
        ],
        resources: [
          {
            id: 1,
            title: '系统架构图',
            image: 'https://picsum.photos/seed/architecture/200/150.jpg',
            uploadDate: '2025-01-10'
          },
          {
            id: 2,
            title: '数据库设计文档',
            image: 'https://picsum.photos/seed/database/200/150.jpg',
            uploadDate: '2025-02-05'
          },
          {
            id: 3,
            title: '用户界面设计',
            image: 'https://picsum.photos/seed/ui/200/150.jpg',
            uploadDate: '2025-03-15'
          }
        ]
      }
    }
  },
  methods: {
    getStatusType(status) {
      const statusMap = {
        '未开始': 'info',
        '进行中': 'warning',
        '已完成': 'success',
        '已提交': 'primary'
      }
      return statusMap[status] || 'info'
    },
    getResultType(type) {
      const typeMap = {
        '期刊论文': 'primary',
        '会议论文': 'success',
        '专利': 'warning',
        '软件著作权': 'info'
      }
      return typeMap[type] || 'info'
    },
    handleTabClick(tab) {
      console.log('切换标签页:', tab.name)
    },
    openLink(link) {
      window.open(link, '_blank')
    },
    viewChapter(chapterId) {
      this.$message.info(`查看章节 ${chapterId}`)
    },
    downloadChapter(chapterId) {
      this.$message.success(`开始下载章节 ${chapterId}`)
    },
    downloadResource(resourceId) {
      this.$message.success(`开始下载资源 ${resourceId}`)
    }
  }
}
</script>

<style lang="scss" scoped>
.thesis-home {
  padding: 20px;
  
  .personal-info, .thesis-info, .thesis-results {
    margin-bottom: 20px;
    
    .body {
      .thesis-abstract {
        margin-top: 20px;
        
        h4 {
          margin-bottom: 10px;
          color: #303133;
        }
        
        p {
          line-height: 1.6;
          color: #606266;
        }
      }
      
      .result-item {
        margin-bottom: 15px;
        
        .result-header {
          display: flex;
          justify-content: space-between;
          align-items: center;
        }
        
        .result-content {
          .result-meta {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 10px;
            color: #909399;
            font-size: 14px;
          }
        }
      }
      
      .resource-card {
        margin-bottom: 20px;
        
        .resource-image {
          width: 100%;
          height: 150px;
          object-fit: cover;
          display: block;
        }
        
        .bottom {
          margin-top: 13px;
          line-height: 12px;
          display: flex;
          justify-content: space-between;
          align-items: center;
          
          .time {
            font-size: 13px;
            color: #999;
          }
          
          .button {
            padding: 0;
            min-height: auto;
          }
        }
      }
      
      .chapter-actions {
        margin-top: 10px;
        text-align: right;
      }
    }
  }
}
</style>